<script setup>
import { ref } from 'vue'
import RegisterPage from "@/views/Login/components/RegisterPage.vue";
import LoginPage from "@/views/Login/components/LoginPage.vue";
import ResetPage from "@/views/Login/components/ResetPage.vue";

const isRegister = ref(1)
</script>

<template>
  <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <RegisterPage v-if="isRegister === 2" v-model="isRegister"></RegisterPage>
      <LoginPage v-else-if="isRegister === 1" v-model="isRegister"></LoginPage>
      <ResetPage  v-else-if="isRegister === 3" v-model="isRegister"></ResetPage>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background-color: #fff;

  .bg {
    background: url('@/assets/fm.png') no-repeat center / 100% 100vh;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;

    .title {
      margin: 0 auto;
    }

    .button {
      width: 100%;
    }

    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>